
<template>
  <div class="box">
    <el-card class="card">
      <el-row>
        <el-col :span="24">
          <el-form ref="ruleForm" :model="form" :rules="rules" label-width="150px">
            <el-form-item label="	活动标题" prop="title">
              <el-input
                v-model="form.title"
                class="input"
                placeholder="请输入活动商品"
                style="width: calc(100% - 100px)"
              />
            </el-form-item>

            <el-form-item label="商品名称" prop="title">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否开启活动">
              <el-radio-group v-model="radio">
                <el-radio :label="1">开</el-radio>
                <el-radio :label="2">关</el-radio>
              </el-radio-group>
            </el-form-item>


            <!--            <el-form-item>-->

            <!--              <el-radio-group v-model="radio">-->
            <!--                <el-radio label="1">开</el-radio>-->
            <!--                <el-radio label="2">关</el-radio>-->
            <!--              </el-radio-group>-->
            <!--            </el-form-item>-->
<!--            <el-form-item v-if="isEditOrDetailId" label="是否开启活动商品">-->
<!--              <el-radio-group v-model="isopenId">-->
<!--                <el-radio label="1">开</el-radio>-->
<!--                <el-radio label="2">关</el-radio>-->
<!--              </el-radio-group>-->

<!--            </el-form-item>-->
            <el-form-item label="活动图片">
              <el-upload
                class="avatar-uploader"
                :headers="img_token"
                :action="img_up+ '/p/goods/pcInsert'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <div class="button">
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="primary" @click="isCheck()">提交</el-button>
<!--          <el-button type="primary" @click="postActivityAdd()">提交</el-button>-->

          <el-button type="primary" v-if="back" @click="goList">返回列表</el-button>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import { activityGoods, activityUpdate, orOetail, postActivityAdd } from '../../api/active'
import { getToken } from '../../utils/auth'
  import { http_URL, IMG_URL } from '../../utils/global'

export default {
  name: 'ActiveAdd',
  data() {
    return {
      img_token: {
        token: getToken()
      },
      img_up: http_URL,
      imageUrl: '',  // 本地展示
      thumb: '',  // 给后台
      options: [],  // 商品列表
      value: '',
      radio: 1,   // 是否开启活动
      orEdit: '', // 编辑或详情id
      back: '',
      local_img_url: IMG_URL,



      form: {
        remarks: '',
        title: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入商品标题', trigger: 'blur' }

        ],
        // remarks: [
        //   { required: true, message: '请输入备注', trigger: 'blur' }
        // ]
      },

    }
  },
  created() {
    this.activityGoods()
    if (this.$route.query.id) {
      this.orEdit = this.$route.query.id
      this.back = this.$route.query.back
      this.radio = this.$route.query.isopen
      this.orOetail()  // 调用详情
    }
  },
  methods: {
    // 判断是新增还是编辑
    isCheck() {
      if (this.orEdit) {
        this.activityUpdate()
      } else {
        this.postActivityAdd()
      }
    },

    // 新增活动商品
    postActivityAdd() {
     const data = {
       title: this.form.title,
       imgurl: this.thumb,
       goodsid: this.value
     }
      postActivityAdd(data).then((res) => {
        // eslint-disable-next-line eqeqeq
        if (res.code == 0) {
          console.log('新增分类商品成功', res)
          this.$message.success('操作成功!')
          this.$router.push('/active/list')
        }
      })
    },

    //修改活动商品
    activityUpdate() {
      const data = {
        title: this.form.title,
        imgurl: this.thumb,  //修改用本地图片
        goodsid: this.value,
        id: this.orEdit
      }
      activityUpdate(data).then(res => {
        if (res.code == 0) {
          console.log('修改活动商品', res)
          this.$message.success("操纵成功")
          // this.orOetail() // 获取活动商品详情
          this.$router.push('/active/list')
        }
      })
    },

    // 获取活动商品列表
    activityGoods() {
      const data = {
        pageNum: 1,
        pageSize: 10
      }
      activityGoods(data).then(res => {
        if (res.code == 0) {
          console.log('获取活动商品列表', res)
          this.options = res.data.list
        }
      })
    },

    // 获取活动商品详情
    orOetail() {
      const data = {
        id: this.orEdit
      }
      orOetail(data).then(res => {
        if (res.code == 0) {
          console.log('获取活动商品详情', res)
          this.form.title = res.data.title
          this.value = res.data.goodsid
          this.radio = res.data.isopen
          this.imageUrl = this.local_img_url +  res.data.imgurl
        }
      })
    },


    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    // 返回列表
    goList() {
      this.$router.go(-1)
    },

    // 商品图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      console.log('this.imageUrl本地要展示', this.imageUrl)
      this.thumb = res.data // 传给后台
      console.log('传给后台', this.thumb)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      const isLt10M = file.size / 1024 / 1024 < 10

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/png/jpeg 格式!')
      }
      if (!isLt10M) {
        this.$message.error('上传头像图片大小不能超过 10MB!')
      }
      return isJPG && isLt10M
    },
  }
}
</script>

<style scoped lang="less">
  .box {
    padding: 20px;

    .card {
      margin-bottom: 20px;
      /*width: 80%;*/
    }

    /*底部按钮*/

    .button {
      margin-bottom: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }

</style>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

